<template>
<div>
	<div class="body">
		<form class="body-form">
			<div>
				<p style="font-size:23px;">查询车票</p>
			</div>
			<div class="body-form-div">
				出发地：&nbsp&nbsp&nbsp&nbsp<input type="text" placeholder="出发地/家/面前所在地" v-model="start">
			</div>
			<div class="body-form-div">
				到达地：&nbsp&nbsp&nbsp&nbsp<input type="text" placeholder="目的地/到达地/终点" v-model="end">
			</div>
			<div class="body-form-div">
				出发日期：<input type="date" placeholder="2020-5-21" v-model="startTime">
			</div>
			<div style="font-size:16px; padding-top:10px; color:red;">
				{{message}}
			</div>
			<div class="body-form-div" style="margin-top:10px;" v-if="changeA">
				<input type="button" value="查询" @click="change()" style="background-color:#FF8C00;color:#FFFFFF;width:120px;">
			</div>
			<div class="body-form-div" style="margin-top:10px;" v-if="changeB">
				<input type="button" value="查询" @click="selectTicketB()" style="background-color:#FF8C00;color:#FFFFFF;width:120px;">
			</div>
		</form>
	</div>
	<div class="body2">
		<div class="body2-div-top">
			<ul>
				<a class="body2-a" @click="seek(1)"><li>国内</li></a>
				<a class="body2-a" @click="seek(2)"><li>欧洲</li></a>
				<a class="body2-a" @click="seek(3)"><li>美洲</li></a>
				<a class="body2-a" @click="seek(4)"><li>其他</li></a>
			</ul>
		</div>
		<div class="body2-div" v-if="sk==1">
			<span><a class="s"><img alt="北京" title="北京" src="./images/北京.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="上海" title="上海" src="./images/上海.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="广州" title="广州" src="./images/广州.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="青岛" title="青岛" src="./images/青岛.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="成都" title="成都" src="./images/成都.jpg" width="300px;"height="200px;"></a></span>
		</div>
		<div class="body2-div" v-if="sk==1">
			<span><a class="s"><img alt="重庆" title="重庆" src="./images/重庆.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="深圳" title="深圳" src="./images/深圳.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="三亚" title="三亚" src="./images/三亚.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="武汉" title="武汉" src="./images/武汉.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="杭州" title="杭州" src="./images/杭州.jpg" width="300px;"height="200px;"></a></span>
		</div>
		<div class="body2-div" v-if="sk==2">
			<span><a class="s"><img alt="希腊" title="希腊" src="./images/希腊.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="瑞士" title="瑞士" src="./images/瑞士.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="英国" title="英国" src="./images/英国.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="俄罗斯" title="俄罗斯" src="./images/俄罗斯.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="意大利" title="意大利" src="./images/意大利.jpg" width="300px;"height="200px;"></a></span>
		</div>
		<div class="body2-div" v-if="sk==2">
			<span><a class="s"><img alt="西班牙" title="西班牙" src="./images/西班牙.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="德国" title="德国" src="./images/德国.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="荷兰" title="荷兰" src="./images/荷兰.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="英国" title="英国" src="./images/英国.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="法国" title="法国" src="./images/法国.jpg" width="300px;"height="200px;"></a></span>
		</div>
		<div class="body2-div" v-if="sk==3">
			<span><a class="s"><img alt="西雅图" title="西雅图" src="./images/西雅图.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="夏威夷" title="夏威夷" src="./images/夏威夷.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="墨西哥" title="墨西哥" src="./images/墨西哥.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="洛杉矶" title="洛杉矶" src="./images/洛杉矶.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="关岛" title="关岛" src="./images/关岛.jpg" width="300px;"height="200px;"></a></span>
		</div>
		<div class="body2-div" v-if="sk==3">
			<span><a class="s"><img alt="纽约" title="纽约" src="./images/纽约.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="加拿大" title="加拿大" src="./images/加拿大.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="多伦多" title="多伦多" src="./images/多伦多.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="拉斯维加斯" title="拉斯维加斯" src="./images/拉斯维加斯.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="华盛顿" title="华盛顿" src="./images/华盛顿.jpg" width="300px;"height="200px;"></a></span>
		</div>
		<div class="body2-div" v-if="sk==4">
			<span><a class="s"><img alt="日本" title="日本" src="./images/日本.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="马来西亚" title="马来西亚" src="./images/马来西亚.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="泰国" title="泰国" src="./images/泰国.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="新加坡" title="新加坡" src="./images/新加坡.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="迪拜" title="迪拜" src="./images/迪拜.jpg" width="300px;"height="200px;"></a></span>
		</div>
		<div class="body2-div" v-if="sk==4">
			<span><a class="s"><img alt="澳大利亚" title="澳大利亚" src="./images/澳大利亚.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="土耳其" title="土耳其" src="./images/土耳其.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="埃及" title="埃及" src="./images/埃及.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="毛里求斯" title="毛里求斯" src="./images/毛里求斯.jpg" width="300px;"height="200px;"></a></span>
			<span><a class="s"><img alt="南极" title="南极" src="./images/南极.jpg" width="300px;"height="200px;"></a></span>
		</div>
	</div>
	<div style="background-color:#1E90FF;height:60px;font-size:30px;padding-left:100px;padding-top:20px;">国内景点</div>
	<div class="body3">
		<div class="body3-div">
			<ul>
				<a class="aaa"><li>北京<hr>￥323/人起</li></a>
				<a class="aaa"><li>上海<hr>￥144/人起</li></a>
				<a class="aaa"><li>三亚<hr>￥798/人起</li></a>
				<a class="aaa"><li>青岛<hr>￥268/人起</li></a>
			</ul>
		</div>
		<div class="body3-div">
			<ul>
				<a class="aaa"><li>杭州<hr>￥298/人起</li></a>
				<a class="aaa"><li>重庆<hr>￥108/人起</li></a>
				<a class="aaa"><li>成都<hr>￥848/人起</li></a>
				<a class="aaa"><li>广州<hr>￥819/人起</li></a>
			</ul>
		</div>
	</div>
	<div class="body4">
		<div style="width:auto;height:60px;background-color:#FFFFFF;padding-left:30px;">
			<ul>
				<a class="body4-a" @click="seek2(1)"><li class="body4-li">最新消息</li></a>
				<a class="body4-a" @click="seek2(2)"><li class="body4-li">常见问题</li></a>
			</ul>
		</div>
		<div class="body4-div" v-if="sk2==1">
			<ul style="float:left;">
				<li>1.公告</li>
				<li>2.补票说明</li>
				<li>3.诚信度奖励公告</li>
				<li>4.免费退票措施</li>
				<li>5.用户诚信度核查公告</li>
			</ul>
			<ul style="float:right;margin-right:950px;">
				<li>6.退票流程</li>
				<li>7.车票价格公告</li>
				<li>8.工作监督</li>
				<li>9.出行安全提示</li>
				<li>10.网站合作与技术帮助支持</li>
			</ul>
		</div>
		<div class="body4-div" v-if="sk2==2">
			<ul style="float:left;">
				<li>1.购票流程</li>
				<li>2.补票流程</li>
				<li>3.诚信度奖励机制</li>
				<li>4.免费退票声明</li>
				<li>5.用户诚信度测试机制</li>
			</ul>
			<ul style="float:right;margin-right:1060px;">
				<li>6.车票错签更改</li>
				<li>7.用户密码丢失</li>
				<li>8.身份认证</li>
				<li>9.系统错误</li>
			</ul>
		</div>
	</div>	
</div>
</template>
<script>
module.exports = {
	    data: function() {
	        return {
	        	start : '',
	        	end : '',
	        	startTime : '',
	        	message : '',
	        	changeA : true,
	        	changeB : false,
	        	sk : 1,
	        	sk2 : 1
	        }
	    },
	    methods : {
	    	seek : function(n){
	    		this.sk = n;
	    	},
	    	seek2 : function(m){
	    		this.sk2 = m;
	    	},
	    	change : function(){
	    		if(this.start==''){
	    			return this.message='请填写出发地';
	    		}else if(this.end==''){
	    			return this.message='请填写到达地';
	    		}else if(this.startTime==''){
	    			return this.message='请填写出发时间';
	    		}else{
	    			alert("请再次确认查询");
	    			return this.changeA = false,this.changeB = true;
	    		}
	    	},
	    	selectTicketB : function(){
	    		this.$router.push({ path:'/ticket',query : {start:this.start,end:this.end,startTime:this.startTime,ok:false}});
	    	}
	    }
}
</script>
 
<style>
	body,ul,li,a{
		text-decoration:none;
		list-style:none;
		padding:0px;
		margin:0px;
	}
	a.s:hover img{
		border:solid 1px #000000;
	}
	a.aaa:hover li{
		background-color:#FFFFFF;
	}
	a.body4-a:hover li{
		background-color:#1874CD;
	}
	a.body2-a:hover li{
		background-color:#FFFFFF;
	}
	.body{
		background-image:url('../images/花.jpg');
		background-size:100%;
		height:800px;
		width:auto;
		text-align:center;
		margin-top:15px;
		margin-bottom:15px;
		border:double 2px #CFCFCF;
	}
	.body-form{
		background-color:#FFFFFF;
		width:500px;
		height:310px;
		margin:120px 100px;
		padding-top:10px;
		border:double 2px #CFCFCF;
		border-radius:10px;
	}
	.body-form-div{
		margin-top:10px;
	}
	.body-form-div input{
		margin-left:11px;
		width:200px;
		height:36px;
		padding:6px 8px;
		border:double 2px #CFCFCF;
	}
	.body2-div-top{
		background-color:#1E90FF;
		width:auto;
		height:80px;
		margin-bottom:10px;
	}
	.body2-div-top ul li{
		display:inline-block;
		font-size:30px;
		margin:0px 0px 0px 0px;
		width:320px;
		height:60px;
		text-align:center;
		padding-top:20px;
	}
	.body2-div{
		margin-left:10px;
		margin-bottom:10px;
	}
	.body2-div span{
		margin-left:10px;
	}
	.body2-div span img{
		border:solid 1px #FFFFFF;
	}
	.body3{
		width:auto;
		height:520px;
		margin:10px 20px;
		border:double 2px #787878;
		padding-top:30px;
		background-image:url('../images/加拿大背景.jpg');
		background-size:100%;
	}
	.body3-div{
		margin-bottom:50px;
		margin-left:120px;
	}
	.body3 ul li{
		display:inline-block;
		background-color:#6495ED;
		font-size:30px;
		text-align:center;
		border-radius:60px;
		margin-left:10px;
		padding-top:10px;
		width:200px;
		height:200px;
	}
	.body4{
		width:auto;
		height:400px;
		border:double 2px #787878;
		padding-top:50px;
	}
	.body4-li{
		display:inline-block; 
		background-color:#BABABA; 
		height:45px; 
		font-size:23px;
		text-align:center;
		width:300px;
		padding-top:15px;
		margin-left:120px;
	}
	.body4-div{
		width:auto;
		height:250px;
		margin:0px 80px;
		border:double 2px #AAAAAA;
		padding:30px 0px 0px 60px;
	}
	.body4-div ul li{
		margin-bottom:20px;
	}
</style>